<template>
    <div id="login">
        <el-form class="loginFrom" :model="logindata" :rules="rules" ref="ruleForm">
            <el-form-item class="login-item">
                <h1 class="login-title">海天酱油登录中心</h1>
            </el-form-item>
            <el-form-item prop="userName">
                <el-input class="login-inputorbuttom" prefix-icon="el-icon-user" placeholder="登录名"
                    v-model="logindata.userName"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input class="login-inputorbuttom" prefix-icon="el-icon-lock" placeholder="密码"
                    v-model="logindata.password"></el-input>
            </el-form-item>
            <!--<el-form-item prop="verificationCode">
          <el-input
            class="login-inputorbuttom"
            v-model="logindata.verificationCode"
          ></el-input>
        </el-form-item>-->
            <el-form-item class="login-item">
                <el-button class="login-inputorbuttom login-bottom" type="primary" v-popover:popover
                    @click="visible = !visible">登 录</el-button>
            </el-form-item>
        </el-form>
        <!--验证码弹窗-->
        <el-popover popper-class="slidingPictures" ref="popover" trigger="manual" v-model="visible">
            <div class="sliding-pictures">
                <div class="vimg">
                    <canvas id="sliderBlock"></canvas>
                    <canvas id="codeImg"></canvas>
                </div>
                <div class="slider">
                    <div class="track" :class="{ pintuTrue: puzzle }">
                        {{ tips }}
                    </div>
                    <div class="button el-icon-s-grid" @mousedown.prevent="drag"></div>
                </div>
                <div class="operation">
                    <span title="关闭验证码" @click="visible = false" class="el-icon-circle-close"></span>
                    <span title="刷新验证码" @click="canvasInit" class="el-icon-refresh-left"></span>
                </div>
            </div>
        </el-popover>
    </div>
</template>

<script>
    export default {
        name: "login",
        data() {
            return {
                tips: "拖动左边滑块完成上方拼图",
                logindata: {
                    userName: "",
                    password: "",
                    verificationCode: ""
                },
                rules: {},
                visible: false,
                //滑块x轴数据
                slider: {
                    mx: 0,
                    bx: 0
                },
                //拼图是否正确
                puzzle: false
            };
        },
        watch: {
            visible(e) {
                if (e === true) {
                    this.canvasInit();
                    this.puzzle = false;
                }
            }
        },
        beforeCreate() { },
        created() { },
        beforeMount() { },
        mounted() { },
        methods: {
            //拼图验证码初始化
            canvasInit() {
                //生成指定区间的随机数
                const random = (min, max) => {
                    return Math.floor(Math.random() * (max - min + 1) + min);
                };
                //x: 254, y: 109
                let mx = random(127, 244),
                    bx = random(10, 128),
                    y = random(10, 99);

                this.slider = { mx, bx };

                this.draw(mx, bx, y);
            },
            //鼠标按下
            drag(e) {
                console.log("鼠标按下", e);
                let dom = e.target; //dom元素
                let slider = document.querySelector("#sliderBlock"); //滑块dom
                const downCoordinate = { x: e.x, y: e.y };

                //正确的滑块数据
                let checkx = Number(this.slider.mx) - Number(this.slider.bx);
                //x轴数据
                let x = 0;
                const move = moveEV => {
                    x = moveEV.x - downCoordinate.x;
                    //y = moveEV.y - downCoordinate.y;
                    if (x >= 251 || x <= 0) return false;
                    dom.style.left = x + "px";
                    //dom.style.top = y + "px";
                    slider.style.left = x + "px";
                };

                const up = () => {
                    document.removeEventListener("mousemove", move);
                    document.removeEventListener("mouseup", up);
                    dom.style.left = "";

                    console.log(x, checkx);
                    let max = checkx - 5;
                    let min = checkx - 10;
                    //允许正负误差1
                    if ((max >= x && x >= min) || x === checkx) {
                        console.log("滑动解锁成功");
                        this.puzzle = true;
                        this.tips = "验证成功";
                        setTimeout(() => {
                            this.visible = false;
                        }, 500);
                    } else {
                        console.log("拼图位置不正确");
                        this.tips = "验证失败，请重试";
                        this.puzzle = false;
                        this.canvasInit();
                    }
                };
                document.addEventListener("mousemove", move);
                document.addEventListener("mouseup", up);
            },
            draw(mx = 200, bx = 20, y = 50) {
                let mainDom = document.querySelector("#codeImg");
                let bg = mainDom.getContext("2d");
                let width = mainDom.width;
                let height = mainDom.height;

                let blockDom = document.querySelector("#sliderBlock");
                let block = blockDom.getContext("2d");
                //重新赋值，让canvas进行重新绘制
                blockDom.height = height;
                mainDom.height = height;

                let imgsrc = require("../assets/images/back.jpg");
                let img = document.createElement("img");
                img.style.objectFit = "scale-down";
                img.src = imgsrc;
                img.onload = function () {
                    bg.drawImage(img, 0, 0, width, height);
                    block.drawImage(img, 0, 0, width, height);
                };

                let mainxy = { x: mx, y: y, r: 9 };
                let blockxy = { x: bx, y: y, r: 9 };
                this.drawBlock(bg, mainxy, "fill");
                this.drawBlock(block, blockxy, "clip");
            },
            //绘制拼图
            drawBlock(ctx, xy = { x: 254, y: 109, r: 9 }, type) {
                let x = xy.x,
                    y = xy.y,
                    r = xy.r,
                    w = 40;
                let PI = Math.PI;
                //绘制
                ctx.beginPath();
                //left
                ctx.moveTo(x, y);
                //top
                ctx.arc(x + (w + 5) / 2, y, r, -PI, 0, true);
                ctx.lineTo(x + w + 5, y);
                //right
                ctx.arc(x + w + 5, y + w / 2, r, 1.5 * PI, 0.5 * PI, false);
                ctx.lineTo(x + w + 5, y + w);
                //bottom
                ctx.arc(x + (w + 5) / 2, y + w, r, 0, PI, false);
                ctx.lineTo(x, y + w);
                ctx.arc(x, y + w / 2, r, 0.5 * PI, 1.5 * PI, true);
                ctx.lineTo(x, y);
                //修饰，没有会看不出效果
                ctx.lineWidth = 1;
                ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
                ctx.strokeStyle = "rgba(255, 255, 255, 0.5)";
                ctx.stroke();
                ctx[type]();
                ctx.globalCompositeOperation = "xor";
            }
        }
    };
</script>
<style>
    .slidingPictures {
        padding: 0;
        width: 300px;
        border-radius: 2px;
    }
</style>
<style scoped lang="scss">
    #login {
        display: flex;
        flex-flow: row;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        height: 100%;
        background-image: url("../assets/images/back.jpg");
        background-size: 100% 100%;

        .loginFrom {
            width: 300px;
            margin-top: -10vw;
            margin-right: 10vw;

            .login-item {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .login-title {
                color: #ffffff;
                font-size: 16px;
                margin-bottom: 10px;
            }

            .login-bottom {
                margin-top: 15px;
            }

            .login-bottom:hover {
                background: rgba(28, 136, 188, 0.5);
            }

            .login-bottom:active {
                background: rgba(228, 199, 200, 0.5);
            }

            /deep/.login-inputorbuttom {
                height: 40px;
                width: 300px;
                background: rgba(57, 108, 158, 0.5);
                border-radius: 20px;
                border: #396c9e 1px solid;
                font-size: 14px;
                color: #ffffff;

                .el-input--small,
                .el-input__inner {
                    line-height: 43px;
                    border: none;
                    color: #ffffff;
                    font-size: 14px;
                    height: 40px;
                    border-radius: 20px;
                    background: transparent;
                    text-align: center;
                }

                .el-input__icon {
                    line-height: 40px;
                    font-size: 16px;
                }
            }
        }
    }

    /*该样式最终是以弹窗插入*/
    .sliding-pictures {
        width: 100%;

        .vimg {
            width: 100%;
            height: 170px;

            #codeImg,
            #sliderBlock {
                padding: 7px 7px 0 7px;
                width: inherit;
                height: inherit;
            }

            /* #codeImg {
        //display: none;
      } */
            #sliderBlock {
                position: absolute;
                z-index: 4000;
            }
        }

        .slider {
            width: 100%;
            height: 65px;
            border-bottom: #c7c9d0 1px solid;
            display: flex;
            align-items: center;
            justify-content: flex-start;

            .track {
                margin-left: 7px;
                width: 286px;
                height: 38px;
                background: rgba(28, 136, 188, 0.5);
                border-radius: 25px;
                font-size: 14px;
                line-height: 38px;
                padding-right: 15px;
                padding-left: 70px;
            }

            .pintuTrue {
                background: #67c23a;
                color: #ffffff;
            }

            .button {
                position: absolute;
                width: 50px;
                height: 50px;
                line-height: 48px;
                background: #ffffff;
                box-shadow: #b9bdc8 0 0 3px;
                border-radius: 50%;
                left: 7px;
                text-align: center;
                font-size: 28px;
                color: #3e5d8b;

                &:hover {
                    color: #2181bd;
                }
            }
        }

        .operation {
            width: 100%;
            height: 40px;

            >span {
                color: #9fa3ac;
                display: inline-block;
                width: 40px;
                font-size: 25px;
                line-height: 40px;
                text-align: center;

                &:hover {
                    background: #e2e8f5;
                }
            }
        }
    }
</style>